<!-- 事件日志 -->
<template>
  <div class="dashboard-editor-container">
    <div style="display:flex;justify-content:space-between;">
      <partitionTree :nodeData="nodeData" :expandArray="expandArray" :addTemplate="false" :defaultExpandAll="false" dialogName="BaselineResult"
        @handleNodeClick="handleNodeClick" ref="partitionTree" @toggleVisibility="toggleVisibility">
      </partitionTree>
      <div :style="{ width: containerWidth }" class="box"
        style="background:#fff;border: 1px solid #ddd;border-radius: 4px;box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);">
        <el-row style="background: #fff; padding: 16px 16px 0;">
          <connsearch ref="connsearch" :formOptions="formOptions" @search="search" @reset="reset">
          </connsearch>
          <el-col :xs="{ span: 24 }" :sm="{ span: 24 }" :md="{ span: 24 }" :lg="{ span: 24 }" :xl="{ span: 24 }"
            style="padding-right: 8px;margin:0px 0;">
            <el-table stripe border :data="tableData" style="width: 100%;">
              <el-table-column label="序号" width="60" type="index"
                :index='(index) => { return (index + 1) + (this.pageNum - 1) * this.pageSize }'> </el-table-column>
              <el-table-column label="部门" show-overflow-tooltip prop="Department" width="120px"></el-table-column>
              <el-table-column label="资产名称" show-overflow-tooltip prop="DeviceName" width="160px"></el-table-column>
              <el-table-column label="使用者" show-overflow-tooltip prop="UserName" width="120px"></el-table-column>
              <el-table-column label="检测时间" show-overflow-tooltip prop="TransTime" width="160"></el-table-column>
              <el-table-column label="核查项目" show-overflow-tooltip prop="BlID"
                :formatter="findBaselineLabel"></el-table-column>
              <el-table-column label="合规结论" show-overflow-tooltip prop="NeedFix" width="120">
                <template slot-scope="{row}">
                  <span :style="{ color: row.NeedFix === 0 ? '#67C23A' : '#F56C6C' }">{{ row.NeedFix === 0 ? '合规' :
                    '不合规' }}</span>
                </template>
              </el-table-column>
              <el-table-column label="描述信息" show-overflow-tooltip prop="Descp"></el-table-column>
              <el-table-column label="操作" width="140px" fixed="right">
                <template slot-scope="scope">
                  <el-button size="mini" type="primary" @click="changeMailGlobal(scope.row)">详情</el-button>
                </template>
              </el-table-column>
            </el-table>
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page=pageNum
              :page-size=pageSize background layout="total, prev, pager, sizes, next, jumper" :total="total">
            </el-pagination>
          </el-col>
        </el-row>
        <el-dialog :close-on-click-modal="false" :close-on-press-escape=false title="详情" :visible.sync="logDialog"
          v-el-drag-dialog width="1000px">
          <el-descriptions :column="2" border>
            <el-descriptions-item label="从属部门">{{ logList.Department }}</el-descriptions-item>
            <el-descriptions-item label="资产名称">{{ logList.DeviceName }}</el-descriptions-item>
            <el-descriptions-item label="资产唯一编码">{{ logList.DeviceUUID }}</el-descriptions-item>
            <el-descriptions-item label="检测时间">{{ logList.TransTime }}</el-descriptions-item>
            <el-descriptions-item label="核查项目">
              <span>{{ findBaselineLabel(logList) }}</span>
            </el-descriptions-item>
            <el-descriptions-item label="合规结论">
              <span :style="{ color: logList.NeedFix === 0 ? '#67C23A' : '#F56C6C' }">{{ logList.NeedFix === 0 ? '合规' :
                '不合规' }}</span>
            </el-descriptions-item>
            <el-descriptions-item label="描述信息" :span="2">{{ logList.Descp }}</el-descriptions-item>
            <el-descriptions-item label="修复建议" :span="2">{{ findBaselineFixScheme(logList.BlID) }}</el-descriptions-item>
          </el-descriptions>
          <el-divider></el-divider>
          <span slot="footer" class="dialog-footer">
            <el-button type="info" @click="logDialog = false">关 闭</el-button>
          </span>
        </el-dialog>
      </div>
    </div>
  </div>
</template>

<script>
import Cookies from 'js-cookie'
import connsearch from "@/components/connSearch";
import barchart from "./components/barchart.vue";
import piechart from "./components/piechart.vue";
import { parseTime, GetDeviceTree2, findItem } from "@/utils/index.js";
import { connrequest } from "@/api/firstPage.js"
import elDragDialog from '@/directive/el-drag-dialog' // base on element-ui
import partitionTree from "@/components/partitionTree";
export default {
  directives: { elDragDialog },
  components: { connsearch, barchart, piechart, partitionTree },
  data() {
    let that = this
    return {
      activeName: "",
      tabTitle: '按所在分区统计分析',
      pageNum: 1,
      pageSize: 10,
      total: 0,
      tab: false,
      logDialog: false,
      logList: [],
      pie1Data: [],
      pie2Data: [],
      pie3Data: [],
      nodeData: [],
      expandArray: [],
      containerWidth: 'calc(100% - 275px)',
      tableData: [],
      BaselineResultList: [],
      searchform: {},
      options: {},
      nodeobj: {},
      searchobj: {},
      echartsobj: {},
      formOptions: [
        {
          col: 6,
          hidden: false,
          label: "检测项目", // label文字
          prop: "BlID", // 字段名
          element: "el-cascader", // 指定elementui组件
          initValue: '', // 字段初始值,
          placeholder: "请选择检测项目", // elementui组件属性
          options: [],
          props: { emitPath: false, checkStrictly: false, label: "Subject", value: "id", children: 'SubClass' },
          rules: [], // elementui组件属性
          events: {
            input(val) {
              that.searchform.BlID = val
            },
          },
        },
        {
          col: 6,
          hidden: false,
          label: "合规性", // label文字
          prop: "BaselineNeedFix", // 字段名
          element: "el-select", // 指定elementui组件
          initValue: 0, // 字段初始值,
          placeholder: "请选择合规性", // elementui组件属性
          options: [
            { label: '全部', value: 0 },
            { label: '合规', value: 1 },
            { label: '不合规', value: 2 }
          ],
          rules: [], // elementui组件属性
          events: {
            input(val) {
              that.searchform.BaselineNeedFix = val
            },
          },
        },
      ],
    };
  },
  //生命周期 - 创建完成（访问当前this实例）
  created() {
    this.pageSize = (Cookies.get('Zhuoguan_DefaultPageLength') || 10) * 1;

    this.$set(this.searchform, 'BaselineNeedFix', 0)
    this.GetBaselineFixSet()
    this.getData()
  },
  //生命周期 - 挂载完成（访问DOM元素）
  mounted() {
    this.initData()
  },
  methods: {
    async initData(searchobj = {}) {
      try {
        const { DeviceTree } = await GetDeviceTree2('BaselineResult', searchobj)
        this.nodeData = DeviceTree
        this.expandArray = [DeviceTree?.[0]?.Name]
      } catch (error) {
        this.$message.error('加载设备树数据失败');
      }
    },
    handleNodeClick(nodeData) {
      this.pageNum = 1
      this.nodeobj = { DepartmentID: nodeData.data.isDevice ? nodeData.data.DepartmentID : nodeData.data.ID, DeviceUUID: nodeData.data.isDevice ? nodeData.data.DeviceUUID : '' }
      this.getData({...this.searchobj, ...this.nodeobj})
    },
    toggleVisibility(isHidden) {
      if (isHidden)
        this.containerWidth = '100%';
      else
        this.containerWidth = 'calc(100% - 275px)';
    },
    async changeMailGlobal(row) {
      this.logList = { ...row }
      this.logDialog = true
    },
    async GetBaselineFixSet() {
      const res = await connrequest('GetBaselineFixSet')
      res.Data.map(item => {
        item.Subject = item.MainClass
        return item
      })
      this.formOptions.map(item => {
        if (item.label === '检测项目') {
          item.options = res.Data
        }
      })
      this.BaselineResultList = res.Data
    },
    findBaselineLabel(row) {
      return findItem(this.BaselineResultList, 'SubClass', 'id', row.BlID, 'Subject')
    },
    findBaselineFixScheme(BlID) {
      return findItem(this.BaselineResultList, 'SubClass', 'id', BlID, 'FixScheme')
    },
    // 获取所有数据
    getData(searchobj = {}) {
      this.GetEventLog(searchobj)
    },
    // 获取事件日志列表
    async GetEventLog(searchobj = {}) {
      const data = {
        Paging: {
          QueryPageNo: this.pageNum,
          QueryPageLength: this.pageSize
        },
        Filter: {
          DeviceUUID: this.searchform.DeviceUUID || '',
          BlID: this.searchform.BlID * 1,
          BaselineNeedFix: this.searchform.BaselineNeedFix,
          ...searchobj
        }
      }
      const res = await connrequest('GetDeviceRealBaselineCheck', data)
      res.Data = res.Data || []
      res.Data = res.Data.map(item => {
        item.TransTime = parseTime(item.TransTime)
        return item
      })
      this.tableData = res.Data
      this.total = res.Paging?.TotalCount
    },
    // 搜索
    search(val) {
      this.pageNum = 1
      this.searchobj = { ...val, BlID: val.BlID * 1 }
      this.searchform = { ...val }
      if (this.searchform.timeRange) {
        this.searchobj = { ...this.searchform, StartTime: this.searchform?.timeRange[0] || '', EndTime: this.searchform?.timeRange[1] || '' }
      }
      this.getData({ ...this.searchobj, ...this.nodeobj })
      this.initData({...this.searchobj})
    },
    // 重置
    reset() {
      this.pageNum = 1
      this.searchform = {}
      this.searchobj = {}
      this.nodeobj = {}
      this.$set(this.searchform, 'BaselineNeedFix', 0)
      this.$refs.connsearch.addInitValue()
      this.getData()
      this.initData()
    },
    handleSizeChange(pageSize) {
      this.pageSize = pageSize
      this.pageNum = 1
      this.GetEventLog({ ...this.searchobj, ...this.nodeobj })
    },
    handleCurrentChange(pageNum) {
      this.pageNum = pageNum
      this.GetEventLog({ ...this.searchobj, ...this.nodeobj })
    },
    handleClick() {
      this.tab = !this.tab
    },
  },
};
</script>
<style lang="scss" scoped>
@import "./components/css/conncss.scss";

::v-deep .el-descriptions-item__label.is-bordered-label {
  width: 200px;
}
</style>